import mx, {createSvgImage} from '../mx';
import '../util/mxConstants';

let mainHandle: any;

export default function() {
    const {mxVertexHandler, mxImage, mxConstants, mxEvent} = mx;

    mainHandle = createSvgImage(18, 18, `<circle cx="9" cy="9" r="5" stroke="#fff" fill="${mxConstants.HANDLE_FILLCOLOR}" stroke-width="1"/>`);

    // set sizer shape
    const rotationHandle = new mxImage('', 19, 21);
    const secondaryHandle = createSvgImage(16, 16, '<path d="m 8 3 L 13 8 L 8 13 L 3 8 z" stroke="#fff" fill="#fca000"/>');

    mxVertexHandler.prototype.rotationEnabled = true;
    mxVertexHandler.prototype.handleImage = mainHandle; 
    mxVertexHandler.prototype.secondaryHandle = secondaryHandle;

    const createSizerShape = mxVertexHandler.prototype.createSizerShape;
    mxVertexHandler.prototype.createSizerShape = function(bounds: number, index: number, fillColor: string) {
        if (index === mxEvent.ROTATION_HANDLE) {
            this.handleImage = rotationHandle;
        }
        return createSizerShape.apply(this, arguments); 
    }

    // Adds rotation handle and live preview
    mxVertexHandler.prototype.manageSizers = true;
    mxVertexHandler.prototype.livePreview = true;
}

export {mainHandle};
